<template>
	<s-layout title="国药优选" navbar="custom" :showLeftButton="true" navbarMode="normal" :bgStyle="template.style?.background"
		:navbarStyle="template.style?.navbar" onShareAppMessage :showFloatButton="true">
		<view class="fresh-goods">
			<view class="bg-head">
				<image style="width: 100vw;height: 300rpx;"
					src="https://ihuanggang-live-1323882773.cos.ap-nanjing.myqcloud.com//image/2025/03/07/5956d1629f394345bb8e8cf7311ccaf9.jpg"
					mode=""></image>
			</view>
			<!-- 商品分类标签 -->
			<view class="tabs-box" style="background-color: #fff;">
				<liuyuno-tabs v-if="tabsList.length > 0" :tabData="tabsList" :defaultIndex="defaultIndex" @tabClick='tabClick' />
			</view>

			<!-- 商品列表 -->
			<view class="goods-block">
				<scroll-view scroll-y="true" class="goods-block-box">
					<view v-if="products.length > 0">
						<s-goods-card ref="guoyao"  :data="goodsCard.data" :products="products" :styles="goodsCard.style" />
					</view>
					<view v-else class="emity" style="width: 710rpx;text-align: center;">
						<image style="width: 400rpx;margin: 0 auto;" src="https://ihuanggang-live-1323882773.cos.ap-nanjing.myqcloud.com//image/2025/03/11/ed27344d217a4e3396658e64b3be8558.png"></image>
						<view>暂无数据</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</s-layout>
</template>

<script>
	import liuyunoTabs from "./components/liuyuno-tabs/liuyuno-tabs.vue";
	import sheep from '@/sheep';
	export default {
		components: {
			liuyunoTabs
		},
		data() {
			return {				
				tabsList: [],
				tabList: [],
				defaultIndex: 0,
				categoryId: 0,
				products: [],
				goodsCard: {
					"data": {
						"mode": 2,
						"goodsFields": {
							"title": {
								"show": 1,
							},
							"subtitle": {
								"show": 1,
							},
							"price": {
								"show": 1,
							},
							"original_price": {
								"show": 1,
							},
							"sales": {
								"show": 1,
							},
							"stock": {
								"show": 0,
							}
						},
						"buyNowStyle": {
							// "mode": 2,
							// "text": "立即购买",
							// "color1": "#E9B461",
							// "color2": "#EECC89",
							// "src": "\/storage\/decorate\/20221115\/4782356b4587dc4f4a218f2540a0bafc.png",
							// "right": '20rpx',
							// "bottom":"18rpx"
						},
						"tagStyle": {
							"show": 0,
							"src": ""
						},
						params: {
							orderField: 'sort',
							orderSort: 'asc'
						},
						"borderRadiusTop": 6,
						"borderRadiusBottom": 6,
						"space": 8
					},
					"style": {
						"background": {
							"type": "color",
							"bgImage": "",
							"bgColor": ""
						},
						"marginLeft": 8,
						"marginRight": 8,
						"marginTop": 0,
						"marginBottom": 10,
						"borderRadiusTop": 0,
						"borderRadiusBottom": 0,
						"padding": 0
					}
				}
			}
		},
		computed: {
			template() {
				return sheep.$store('app').template.user
			}
		},
		mounted() {
			this.getCategoryList()
		},
		methods: {
			async getCategoryList() {
				const res = await sheep.$api.guoyao.getCategoryList();
				if (res.code == 200) {
					res.data.map(item => {
						console.log(item.name)
						this.tabsList.push(item.name)
					})
					this.products = res.data[0].products
					console.log(this.tabsList)
					this.tabsList.push()
					this.tabList = res.data
				}
			},
			tabClick(e) {
				console.log('this.tabList',this.tabList)
				this.products = []
				console.log('e', e)
				setTimeout(() => {
					this.products = this.tabList[e].products
				},500)
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #efeef3;
	}

	.fresh-goods {
		position: relative;
	}

	.bg-head {
		position: absolute;
		top: 170rpx;
		height: 300rpx;
	}

	.tabs-box {
		position: absolute;
		width: 100vw;
		top: 490rpx;
	}

	.goods-block {
		position: absolute;
		top: 580rpx;
		padding: 20rpx;
	}
	
	.goods-block-box {
		height: calc(100vh - 620rpx);
		overflow: hidden;
	}
</style>